<template>
	<view>
		<view class="nav1">
			<u-navbar title="新增地址" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<!-- <view class="">
			<u-notice-bar :text="notice" mode="closable" speed="30" bgColor="#21B9AD" color="#fff"></u-notice-bar>
		</view> -->
		<u-gap height="10"></u-gap>
		<view class="ml30 mr30">
			<view class="bgFff radius30 p30">
				<view class="flex-jus" @click="chooseAddress">
					<view class="left-label">
						<text class="c343 f26 ml10">地址</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20" :class="form.userAddr?'c343':'c999'">{{form.userAddr || '请精确到小区及楼号'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="left-label">
						<text class="c343 f26 ml10">门牌号</text>
					</view>
					<view class="flex1 ml30">
						<u-input v-model="form.houseNumber" border="none" inputAlign="right" placeholder="例：1单元01"></u-input>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="left-label">
						<text class="c343 f26 ml10">联系人</text>
					</view>
					<view class="flex1 flex ml30">
						<view class="flex1">
							<u-input v-model="form.realName" border="none" placeholder="请填写联系人姓名"></u-input>
						</view>
						<view class="ml20">
							<u-radio-group v-model="form.userGender" activeColor="#FFDE6D">
								<u-radio :customStyle="{marginRight: '8px'}" size="16" labelSize="12" v-for="(item, index) in sexList"
									:key="index" :label="item.name" :name="item.value">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="left-label">
						<text class="c343 f26 ml10">手机号</text>
					</view>
					<view class="flex1 ml30">
						<u-input type="number" v-model="form.phone" border="none" inputAlign="right" placeholder="请填写联系人手机号"></u-input>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus">
					<view class="left-label">
						<text class="c343 f26 ml10">默认</text>
					</view>
					<view class="">
						<u-radio-group v-model="form.isDef" activeColor="#FFDE6D">
							<u-radio :customStyle="{marginRight: '8px'}" size="16" labelSize="12" v-for="(item, index) in defList"
								:key="index" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0 0 0"></u-line>
			</view>
		</view>
		<view class="fix-bot">
			<view class="ml30 mr30" v-if="id">
				<u-button color="#21B9AD" :disabled="disabled" :customStyle="{'color':'#fff','height':'80rpx'}" shape="circle"
					@click="updateAddress()">修改地址</u-button>
			</view>
			<view class="ml30 mr30" v-else>
				<u-button color="#21B9AD" :disabled="disabled" :customStyle="{'color':'#fff','height':'80rpx'}" shape="circle"
					@click="saveAddress()">保存地址</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
	</view>
</template>

<script>
	import {getAddressdetail,saveAddress,updateAddress} from '@/common/api_user.js'
	export default {
		name: '',
		data() {
			return {
				notice:'亲爱的用户，感谢您选择东楚畅通服务。我们注意到您填写的地址目前尚未覆盖在我们的服务区域内。为了提供更优质的服务体验，我们目前仅在黄石市的黄石港区、下陆区和西塞山区提供服务。请您放心，我们正积极扩展服务范围，未来将有更多区域加入我们的服务版图。请您持续关注我们的更新，期待不久的将来能为您提供服务。再次感谢您的理解与支持！',
				id:'',
				form: {
					userAddr:'',
					houseNumber: '',
					realName:'',
					userGender:1,
					phone:'',
					isDef:1
				},
				sexList:[
					{
						name:'先生',
						value:1
					},
					{
						name:'女士',
						value:2
					}
				],
				defList:[
					{
						name:'是',
						value:1
					},
					{
						name:'否',
						value:2
					}
				]
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
				this.getAddressdetail()
			}
		},
		computed:{
			disabled(){
				let disabled = true
				if(this.form.userAddr && this.form.houseNumber && this.form.realName && this.form.userAddr && this.form.phone){
					disabled = false
				}
				return disabled
			}
		},
		methods: {
			async getAddressdetail(){
				uni.showLoading({
					mask:true
				})
				const res = await getAddressdetail({
					id:this.id
				})
				if (res.code == 200) {
					let data = res.data
					this.form = {
						id:data.id,
						userAddr:data.userAddr,
						houseNumber: data.houseNumber,
						realName:data.realName,
						userGender:data.userGender,
						phone:data.phone,
						isDef:data.isDef
					}
				}
				uni.hideLoading()
			},
			chooseAddress(){
				const that = this
				uni.chooseLocation({
					success(res) {
						that.form.userAddr = res.address
						console.log(res);
					}
				})
			},
			async saveAddress(){
				uni.showLoading({
					mask:true
				})
				const res = await saveAddress(this.form)
				if (res.code == 200) {
					uni.hideLoading()
					uni.navigateBack()
				}
			},
			async updateAddress(){
				uni.showLoading({
					mask:true
				})
				const res = await updateAddress(this.form)
				if (res.code == 200) {
					uni.hideLoading()
					uni.navigateBack()
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}
	.left-label{
		width: 20%;
	}
</style>